<template>
    <div class="body_background" :style="GetWindowBackground">
        <div class="body_background padding-top10">
            <ul class="staff-list-box block-box">
                <li v-for="(item,index) in staffList"
                    :key="index"
                    @click="goStaffDetailFun(item)"
                >
                    <div class="staff-name-box align-left">
                        <div class="main-color big-font-size">{{item.name}}</div>
                        <div class="small-font-size light-color">部门：{{item.department}}</div>
                    </div>
                    <div class="main-color big-font-size">{{item.position}}</div>
                </li>
            </ul>
            <div class="seize-seat light-color">-- 没有数据了 --</div>
            <div class="body_background create-button-box">
                <mt-button class="background white-color middle-font-size create-button"
                           @click="createStaffFun"
                >创建员工
                </mt-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "StaffManage",
        data() {
            return {
                id: '',
                GetWindowBackground: {
                    'min-height': ''
                },
                staffList: [
                    {
                        id: 1,
                        name: "张三",
                        department: '技术部',
                        position: '店长',
                    }, {
                        id: 2,
                        name: "张三",
                        department: '技术部',
                        position: '店长',
                    }, {
                        id: 3,
                        name: "张三",
                        department: '技术部',
                        position: '店长',
                    }, {
                        id: 4,
                        name: "张三",
                        department: '技术部',
                        position: '店长',
                    }, {
                        id: 5,
                        name: "张三",
                        department: '技术部',
                        position: '店长',
                    }
                ],
            }
        },
        mounted() {
            this.id = this.$route.query.id;
            console.log(this.id)
        },
        methods: {
            //创建员工
            createStaffFun() {
                this.$router.push('/StaffCreate')
            },
            //进入详情
            goStaffDetailFun(item) {
                console.log(item.id)
                this.$router.push('/StaffDetail?id=' + item.id)
            },
            getBodyHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowBackground['min-height'] = window.innerHeight + 'px'
            },
        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getBodyHeight) // 注册监听器
            this.getBodyHeight() // 页面创建时先调用一次
        },
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.getBodyHeight)
        },
    }
</script>

<style lang="scss" scoped>
    .block-box {
        border-radius: 6px;
    }

    .staff-list-box {
        padding: 0 20px !important;
    }

    .seize-seat {
        margin-bottom: 80px;
    }

    li {
        width: calc(100% - 40px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f5f6fa;
        padding: 20px;
        margin: 0 10px;

    }

    li:last-child {
        border-bottom: 0 !important;
    }

    .staff-name-box {
        width: 50%;
    }

    .create-button-box {
        width: 100%;
        height: 80px;
        position: fixed;
        bottom: 0px;

    .create-button {
        width: 200px;
        margin-top: 20px;
        border-radius: 10px;
    }

    }


</style>